<template>
  <a-card :bordered="false" :body-style="{ padding: 0 }">
    <div class="ele-cell center">

      <a-auto-complete v-model:value="eventsWhere.customer_val" :options="customerOptions" placeholder="请输入客户名称"
        style="width: 200px" @select="customer_onSelect_s" @search="customer_onSearch" allow-clear />
              <a-button type="primary" @click="() => listEventsFn()">查询</a-button>
    </div>
    <a-row :gutter="16">
      <a-col :lg="24" :md="15" :sm="24" :xs="24">
        <!-- <div class="demo-monitor-title">优质客户排名</div> -->
        <template v-for="(item, index) in eventsData.data" :key="index">
          <a-row :gutter="16" class="row">
            <a-col :span="20">
              {{ index + 1 }}、 {{ item.customer }}在{{ item.eventDate }}有{{ item.type }}事件{{ item.content }}
            </a-col>
            <a-col :span="4">
              <div class="text_color text_display">{{ item.createTime }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.createName }}
              </div>
            </a-col>
          </a-row>
        </template>

      </a-col>
    </a-row>
  </a-card>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';

import dayjs from 'dayjs';
import { pageEvents, listEvents, removeEvents, addEvents, updateEvents } from '@/api/order/events';
import { listCustomersSel } from '@/api/order/customer';


import { TIME_OUT } from '@/config/damon';

let eventsWhere = reactive({
  customer_val: ''
})
let eventsData = reactive({ data: {} })
function listEventsFn() {
  listEvents({ customer: eventsWhere.customer, checked: 10 }).then((msg) => {
    eventsData.data = msg
  }).catch((e) => {
  });
}

//防止重复刷新
//客户下拉列表
let customer_m_timeout = 0
let customer_val_timeout = 0
const customerOptions = ref([]);
const customer_onSearch = searchText => {
  clearTimeout(customer_m_timeout)
  customer_m_timeout = setTimeout(() => {
    listCustomersSel({ 'name': searchText, type: '货代' }).then(msg => {
      customerOptions.value = msg
    }).catch((e) => {
    })
  }, TIME_OUT);
};
const customer_onSelect_s = (value2, option2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value})
  eventsWhere.customer_val = option2.label
  eventsWhere.customer = option2.label
  eventsWhere.customerId = option2.value
};
// const customer_blur_s = () => {
//   // eventsWhere.customer_val = eventsWhere.customer
//   eventsWhere.customer = eventsWhere.customer_val
//   eventsReload()
// };
watch(() => eventsWhere.customer_val, (val) => {
  eventsWhere.customer = eventsWhere.customer_val
  clearTimeout(customer_val_timeout)
  customer_val_timeout = setTimeout(() => {
    listEventsFn()
  }, TIME_OUT);
},
{immediate: true}
)
</script>

<style lang="less" scoped>
.monitor-card-tabs :deep(.ant-tabs-nav) {
  padding: 0 16px;
}

.demo-monitor-title {
  padding: 6px 20px;
}

.demo-monitor-rank-item {
  padding: 0 20px;
  margin-top: 18px;
}

.content {
  display: flex;
  justify-content: space-between;

  .icontent {

    display: flex;
    justify-content: space-between;
  }
}

.text_color {
  color: var(--text-color-secondary);
}

.text_display {
  // display: flex;
  // justify-content: flex-end;
  // padding-right: 20px;
  padding-right: 20px;
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 20px;

  font-size: 14px;
}

.center {
  justify-content: center;
  margin-top: 20px;
}</style>
